import * as c from '@/services/consts';
import {
  DrawerForm,
  ProFormInstance,
  ProFormSelect,
} from '@ant-design/pro-form';
import { Col, Row } from 'antd';
import React, { useRef, useState } from 'react';

type VpnServerFormProps = {
  visible: boolean;
  urlGrafana: string | undefined;
  onCancel: () => void;
};

const VpnServerForm: React.FC<VpnServerFormProps> = (props) => {
  const { visible, onCancel, urlGrafana } = props;

  if (!visible) {
    return null;
  }
  const [urlGrafanaFormHour, setUrlGrafanaFormHour] =
    useState<string>('now-24h');
  const [grafanaStep, setGrafanaStep] = useState<string>('6m');

  const formRef = useRef<ProFormInstance>();

  return (
    <DrawerForm<API.VpnServerMonitorModel>
      open={visible}
      title={<span>全局流量监控</span>}
      formRef={formRef}
      autoFocusFirstInput
      width={1200}
      drawerProps={{
        // forceRender: true,
        // destroyOnClose: true,
        closable: false,
        onClose: onCancel,
        // maskClosable: false,
      }}
      submitter={{
        render: (props, defaultDoms) => {
          return [];
        },
      }}
    >
      <Row gutter={24}>
        <Col span={12}>
          <ProFormSelect
            name="grafanaHour"
            label="流量监控时间"
            width={200}
            allowClear={true}
            initialValue={'now-24h'}
            options={c.GrafanaHours}
            fieldProps={{
              onChange: (val, option) => {
                setUrlGrafanaFormHour(val);
                setGrafanaStep(option.interval);
              },
            }}
          />
        </Col>
        <Col span={12}></Col>

        <Col span={24}>
          <iframe
            src={`${urlGrafana}&from=${urlGrafanaFormHour}&var-interval=${grafanaStep}`}
            width="1150"
            height="1000"
            frameborder="0"
          ></iframe>
        </Col>
      </Row>
    </DrawerForm>
  );
};

export default VpnServerForm;
